<template>
  <div
    style="
      height: 80px;
      line-height: 50px;
      margin-top: -9px;
      border-bottom: 1px solid #ccc;
      display: flex;
      background-image: linear-gradient(to right, #434343 0%, black 100%);
    "
  >
    <div class="demo-image">
      <el-image
        style="width: 40px; height: 40px; margin-top: 10px; margin-left: 110px"
        :src="imag1"
      >
      </el-image>
    </div>
    <span
      style="
        width: 200px;
        padding-left: 30px;
        font-size: x-large;
        margin-left: -90px;
        font-weight: bold;
        color: orange;
        margin-top: 10px;
      "
      >星光电影</span
    >
    <div style="margin-left: -30px; font-weight: bold; margin-top: 10px">
      <span
        style="margin-left: 60px; margin-right: 80px; font-size: large; color: white"
        @click="router.push('/')"
        >首页</span
      >
      <span
        style="margin-right: 60px; font-size: large; color: white"
        @click="router.push('/movieList')"
        >电影</span
      >
      <span style="margin-right: 60px; font-size: large; color: white" @click="router.push('/Buy')"
        >购票</span
      >
      <span
        style="margin-right: 60px; font-size: large; color: white"
        @click="router.push('/myOrder')"
        >我的观影</span
      >
      <span
        style="margin-left: 30px; margin-right: 80px; font-size: large; color: white"
        @click="router.push('/moviePush')"
        >个性化电影推荐</span
      >
    </div>
    <div style="flex: 1"></div>
    <div style="margin-top: 30px; margin-right: 50px">
      <el-dropdown>
        <span class="el-dropdown-link" style="color: white">
          <span>{{ user }}</span>
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click.native="toLogin">登录账号</el-dropdown-item>
            <el-dropdown-item @click.native="router.push('/Register')">注册账号</el-dropdown-item>
            <el-dropdown-item @click.native="router.push('/userInfo')">个人信息</el-dropdown-item>
            <el-dropdown-item @click.native="router.push('/updateUser')">修改信息</el-dropdown-item>
            <el-dropdown-item @click.native="quit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue';
import { onBeforeMount, ref } from 'vue';
import router from '../../router/index.js';
const imag1 = require('@/assets/jiangbei2.png');
let user = ref('登录/注册');

const toLogin = () => {
  sessionStorage.clear();
  router.push('/Login');
};
const quit = () => {
  sessionStorage.clear();
  user.value = '登录/注册';
};

onBeforeMount(() => {
  if (JSON.parse(sessionStorage.getItem('username')) !== null) {
    user.value = JSON.parse(sessionStorage.getItem('username'));
  }
});
</script>
<style lang="scss" scoped>
#el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

#el-icon-arrow-down {
  font-size: 12px;
}

#example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
